<template>
	<div class="maincenter">
		<div class="material">
			<a-table :data-source="list" bordered :loading="loading" :row-selection="rowSelection"
				:scroll="{x: 'calc(700px + 50%)', y: 240 }" :customRow="rowClick" :columns="columns ">
				<template :slot="col" slot-scope="text, record, index" v-for="col in colList">
					<div :key="col">
						<a-input v-if="col == 'bomcode' || col =='specification'" :value="record[col]"
							@dblclick="e => dbClickTab(col,record.bomcode,record)"
							@change="e => changeList(e.target.value, record.rowno, col)" />
						<a-input v-if="col == 'part' " :value="record[col]"
							@change="e => changeList(e.target.value, record.rowno, col)" />
						<a-input v-if="col == 'unitConsumption' || col == 'spareButton' " type="number"
							:value="record[col]" @change="e => changeList(e.target.value, record.rowno, col)" />
						<a-input v-if="col.indexOf('note') != -1 " :value="text"
							@change="e => changeList(e.target.value, record.rowno, col)" />
						<a-input v-if="col.indexOf('colourid') != -1  " :value="text"
							@dblclick="e => dbClickTab(col,record.bomcode,record)"
							@change="e => changeList(e.target.value, record.rowno, col)" />
						<a-select v-if="col == 'colorSelection' " style="width: 120px">
							<a-select-option value="jack">
								Jack
							</a-select-option>
						</a-select>
					</div>
				</template>
			</a-table>
		</div>
		<div class="btn">
			<a-button type="primary" @click="save">添加辅料</a-button>
			<a-button type="primary" style="margin: 0 10px;" @click="add">保存辅料</a-button>
			<a-button type="primary" @click="del">删除辅料</a-button>
		</div>

		<a-modal :title="title" :visible="visible" :width="700" @ok="modalSave" @cancel="visible = false">
			<a-input-search style="width: 250px;margin:0 0 10px 0;" v-model="searchName" placeholder="请输入编号或名称"
				enter-button @search="onSearch" />
			<a-table :pagination="false" :columns="columnsModal" @change="pageTab" :row-selection="rowSelectionMal"
				:data-source="dataModalTab">

			</a-table>
			<div style="margin: 10px 0 0 0;text-align: right;">
				<a-pagination v-model="current" @change="pageTab" :pageSize="10" :total="total" show-less-items />
			</div>
		</a-modal>
	</div>
</template>
<script>
	import {
		getNewStyleBomIngredients,
		getSpecification,
		getIngredients,
		getIngColor,
		saveNewStyleBomIngredients,
		deleteNewStyleBomIngredients
	} from '@api/spection/index'
	export default {
		name: "material",

		data() {
			return {
				columnsModal: [],
				dataModalTab: [],
				visible: false,
				colList: [],
				columns: [{
						title: '序号',
						dataIndex: '序号',
						key: '序号',
						customRender: (text, record, index) => {
							return index + 1
						},
						width: 70
					},
					{
						title: '辅料编号',
						dataIndex: 'bomcode',
						key: 'bomcode',
						scopedSlots: {
							customRender: 'bomcode'
						},
						width: 170
					},
					{
						title: '辅料名称',
						dataIndex: 'bomname',
						key: 'bomname',
						width: 250
					},
					{
						title: '部位',
						dataIndex: 'part',
						key: 'part',
						scopedSlots: {
							customRender: 'part'
						},
						width: 150
					},
					{
						title: '规格',
						dataIndex: 'specification',
						key: 'specification',
						scopedSlots: {
							customRender: 'specification'
						},
						width: 150
					},
					{
						title: '单耗',
						dataIndex: 'unitConsumption',
						key: 'unitConsumption',
						scopedSlots: {
							customRender: 'unitConsumption'
						},
						width: 150
					},
					{
						title: '备扣',
						dataIndex: 'spareButton',
						key: 'spareButton',
						scopedSlots: {
							customRender: 'spareButton'
						},
						width: 150
					},
					{
						title: '面料色',
						dataIndex: 'colorSelection',
						key: 'colorSelection',
						scopedSlots: {
							customRender: 'colorSelection'
						},
						width: 152
					}
				],
				labelCol: {
					span: 6
				},
				wrapperCol: {
					span: 14
				},
				getliest: ["规格", "s", "m", "l", "xl"],
				value: "",
				list: [],
				pagination: false,
				loading: false,
				colType: '',
				colCode: '',
				searchName: '',
				selMalList: [],
				dbSelRow: {},
				title: '',
				current: 1,
				total: 0,
				selFLRow: []
			};
		},
		mounted() {
			this.getNewStyleBomIngredients()
		},
		computed: {
			rowSelection() {
				return {
					onChange: (selectedRowKeys, selectedRows) => {
						console.log(
							`selectedRowKeys: ${selectedRowKeys}`,
							"selectedRows: ",
							this.selFLRow = selectedRows
						);
					},
				};
			},
			rowSelectionMal() {
				return {
					type: 'radio',
					onChange: (selectedRowKeys, selectedRows) => {
						this.selMalList = []
						this.selMalList = selectedRows
					},
				};
			}
		},
		methods: {
			pageTab(page) {
				this.current = page
				console.log(page)
				this.getIngredients(this.colCode)
			},
			onSearch() {
				if (this.colType == 'bomcode') {
					this.getSpecification(this.colCode)
				} else if (this.colType == "specification") {
					this.getSpecification(this.colCode)
				} else if (this.colType == "colourid") {
					this.getIngColor(this.colCode)
				}
			},
			modalSave() {
				if (this.colType == 'bomcode') {
					const newData = [...this.list]
					const target = newData.find(item => this.dbSelRow.rowno === item.rowno);
					if (target) {
						target['bomname'] = this.selMalList[0].ingredientsName;
						this.list = newData;
					}
				} else if (this.colType == "specification") {
					const newData = [...this.list]
					const target = newData.find(item => this.dbSelRow.rowno === item.rowno);
					if (target) {
						target['specification'] = this.selMalList[0].specification;
						this.list = newData;
					}
				}
				if (this.colType.indexOf('colourid') != -1) {
					let leftArr = this.colType.split('[')
					let a = leftArr[0]
					let b = leftArr[1].split(']')[0]
					let c = leftArr[1].split('].')[1]
					let d = leftArr[2].split(']')[0]
					let e = leftArr[2].split('].')[1]
					const newData = [...this.list]
					const target = newData.find(item => this.dbSelRow.rowno === item.rowno);
					if (target) {
						target[a][b][c][d][e] = this.selMalList[0].colorId;
						target[a][b][c][d]['colourName'] = this.selMalList[0].colorName;
						this.list = newData;
					}
				}
				this.visible = false
			},
			dbClickTab(col, code, row) {
				this.dbSelRow = row
				this.colType = col
				this.colCode = code
				if (col == 'bomcode') {
					this.title = '搜索物料'
					this.columnsModal = [{
							title: '序号',
							dataIndex: '序号',
							key: '序号',
							customRender: (text, record, index) => {
								return index + 1
							},
							width: 70
						},
						{
							title: '物料编号',
							dataIndex: 'ingredientsCode',
							key: 'ingredientsCode',
						},
						{
							title: '物料名称',
							dataIndex: 'ingredientsName',
							key: 'ingredientsName',
						}
					]
					this.getIngredients(code)
				} else if (col == 'specification') {
					this.title = '搜索规格'
					this.columnsModal = [{
							title: '序号',
							dataIndex: '序号',
							key: '序号',
							customRender: (text, record, index) => {
								return index + 1
							},
							width: 70
						},
						{
							title: '规格编号',
							dataIndex: 'ingredientsCode',
							key: 'ingredientsCode',
						},
						{
							title: '规格名称',
							dataIndex: 'specification',
							key: 'specification',
						}
					]
					this.getSpecification(code)
				}
				if (col.indexOf('colourid') != -1) {
					this.title = '搜索颜色'
					this.columnsModal = [{
							title: '序号',
							dataIndex: '序号',
							key: '序号',
							customRender: (text, record, index) => {
								return index + 1
							},
							width: 70
						},
						{
							title: '颜色编号',
							dataIndex: 'colorId',
							key: 'colorId',
						},
						{
							title: '颜色名称',
							dataIndex: 'colorName',
							key: 'colorName',
						}
					]
					this.getIngColor(code)
				}
				this.visible = true
			},
			changeList(rowVal, rowId, rowkey) {
				const newData = [...this.list]
				const target = newData.find(item => rowId === item.rowno);
				if (target) {
					if (rowkey.indexOf('note') != -1) {
						let leftArr = rowkey.split('[')
						let a = leftArr[0]
						let b = leftArr[1].split(']')[0]
						let c = leftArr[1].split('].')[1]
						let d = leftArr[2].split(']')[0]
						let e = leftArr[2].split('].')[1]
						console.log(`${a}--${b}--${c}--${d}--${e}`)
						target[a][b][c][d][e] = rowVal;
					} else {
						target[rowkey] = rowVal;
					}

					this.list = newData;
				}
			},
			del() {
				this.deleteNewStyleBomIngredients()
			},
			add(){
				this.saveNewStyleBomIngredients()
			},
			async deleteNewStyleBomIngredients(code) {
				let data = {
					list: [{
						"rowno": 2,
						"bomcode": "2SJ0458",
						"billno": "2208230K0756"
					}]
				}
				data.list = this.selFLRow
				const res = await deleteNewStyleBomIngredients(data).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg)
						this.getNewStyleBomIngredients()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async saveNewStyleBomIngredients(code) {
				let data = {
					list:[]
				}
				this.list.forEach(el => {
					if(el['isNew']){
						data.list.push(el)
					}
				})
				const res = await saveNewStyleBomIngredients(data).then(res => {
					if (res.code == 200) {
						this.$message.success(res.msg)
						this.getNewStyleBomIngredients()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async getIngColor(code) {
				let data = {
					colorId: this.searchName,
					'colorName': this.searchName,
					'ingredientsCode': code,
				}
				const res = await getIngColor(data).then(res => {
					if (res.code == 200) {
						this.dataModalTab = res.data
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async getIngredients(code) {
				let data = {
					current: parseInt(this.current),
					'ingredientsCode': code,
					'ingredientsName': this.searchName,
					size: parseInt(10),
				}
				const res = await getIngredients(data).then(res => {
					if (res.code == 200) {
						console.log('物料', res)
						// this.current = res.data.current
						this.total = res.data.total
						this.dataModalTab = res.data.records
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async getSpecification(code) {
				let data = {
					'ingredientsCode': code,
					'specification': this.searchName
				}
				const res = await getSpecification(data).then(res => {
					if (res.code == 200) {
						console.log('面料', res)
						this.dataModalTab = res.data
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			async getNewStyleBomIngredients() {
				let _this = this
				let columnsObj = {
					title: '',
					children: []
				}
				const res = await getNewStyleBomIngredients(this.$route.query.billNo).then(res => {
					if (res.code == 200) {
						this.columns = [{
								title: '序号',
								dataIndex: '序号',
								key: '序号',
								customRender: (text, record, index) => {
									return index + 1
								},
								width: 70
							},
							{
								title: '辅料编号',
								dataIndex: 'bomcode',
								key: 'bomcode',
								scopedSlots: {
									customRender: 'bomcode'
								},
								width: 170
							},
							{
								title: '辅料名称',
								dataIndex: 'bomname',
								key: 'bomname',
								width: 250
							},
							{
								title: '部位',
								dataIndex: 'part',
								key: 'part',
								scopedSlots: {
									customRender: 'part'
								},
								width: 150
							},
							{
								title: '规格',
								dataIndex: 'specification',
								key: 'specification',
								scopedSlots: {
									customRender: 'specification'
								},
								width: 150
							},
							{
								title: '单耗',
								dataIndex: 'unitConsumption',
								key: 'unitConsumption',
								scopedSlots: {
									customRender: 'unitConsumption'
								},
								width: 150
							},
							{
								title: '备扣',
								dataIndex: 'spareButton',
								key: 'spareButton',
								scopedSlots: {
									customRender: 'spareButton'
								},
								width: 150
							},
							{
								title: '面料色',
								dataIndex: 'colorSelection',
								key: 'colorSelection',
								scopedSlots: {
									customRender: 'colorSelection'
								},
								width: 152
							}
						]
						res.data[0].saleColourVoList.forEach((el, i) => {
							columnsObj['title'] = el.codename
							columnsObj['key'] = el.stycolorid
							columnsObj['children'] = []
							Object.keys(el.newStyleBomIngColourVoList[0]).forEach(item => {
								if (item == 'colourName') {
									columnsObj['children'].push({
										title: '颜色名',
										dataIndex: `saleColourVoList[${i}].newStyleBomIngColourVoList[0]['${item}']`,
										width: 150,
									})
								}
								if (item == 'colourid') {
									columnsObj['children'].push({
										title: '颜色号',
										dataIndex: `saleColourVoList[${i}].newStyleBomIngColourVoList[0]['${item}']`,
										width: 150,
										scopedSlots: {
											customRender: `saleColourVoList[${i}].newStyleBomIngColourVoList[0].${item}`
										},
									})
								}
								if (item == 'note') {
									columnsObj['children'].push({
										title: '备注/配色',
										dataIndex: `saleColourVoList[${i}].newStyleBomIngColourVoList[0]['${item}']`,
										width: 150,
										scopedSlots: {
											customRender: `saleColourVoList[${i}].newStyleBomIngColourVoList[0].${item}`
										},
									})
								}
								if (item == 'ingColour') {
									columnsObj['children'].push({
										title: '辅料名',
										dataIndex: `saleColourVoList[${i}].newStyleBomIngColourVoList[0]['${item}']`,
										width: 150,
										scopedSlots: {
											customRender: `saleColourVoList[${i}].newStyleBomIngColourVoList[0].${item}`
										},
									})
								}
							})

							this.columns.push({
								...columnsObj
							})

						})
						// console.log('aaa', this.columns)
						this.columns.forEach(el => {
							if (el.scopedSlots) {
								this.colList.push(el.scopedSlots['customRender'])
							}
							if (el.children && el.children.length > 0) {
								el.children.forEach(i => {
									if (i.scopedSlots) {
										this.colList.push(i.scopedSlots['customRender'])
									}
								})
							}
						})
						this.list = res.data
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			save() {
				let data = {}
				data['isNew'] = true
				Object.keys(this.list[0]).forEach(el => {
					if (el == 'saleColourVoList' || el == 'sizeSetVoList') {
						if (el == 'saleColourVoList') {
							data[el] = []
							data[el].push({
								codename: '',
								newStyleBomIngColourVoList: [{
									codename: '',
									colourCode: '',
									colourName: '',
									colourid: '',
									ingColour: '',
									note: '',
									stycolorid: ''
								}],
								stycolorid: ''
							})

						} else {
							data[el] = []
						}
					} else {
						if(el == 'billno'){
							data[el] = this.$route.query.billNo
						}else if(el == 'rowno'){
							data[el] = this.list.length + 1
						}else{
							data[el] = ''
						}
						
					}

				})
				console.log(data)
				this.list.push(data)
			},
			rowClick(record, index) {},
		},
	};
</script>
<style lang="less" scoped>
	/deep/ .ant-row {
		height: 10px;
	}

	/deep/ .ant-table-thead>tr>th {
		text-align: center;
	}

	/deep/ .ant-table table {
		text-align: center;
	}

	.btn {
		margin: 30px 0 0 60px;

		.addaAuxiliary {
			margin: 0 20px;
		}
	}

	.maincenter {
		margin: 60px 30px 0 30px;
	}

	/deep/ .ant-table-thead>tr>th {
		text-align: center;
	}

	.material {
		margin-top: 20px;
	}

	.table {
		margin-bottom: 50px;
	}
</style>